.row:after {
  clear: both;
  display: block;
  content: " ";
  height: 0px;
  width: 0px;
}

.row:before {
  clear: both;
  display: block;
  content: " ";
  height: 0px;
  width: 0px;
}

.col-width(@scale) {
  width: ( @scale / 24 ) * 100%;
}

.col-margin(@scale) {
  margin-left: (@scale / 24) * 100%;
}

.generate-d-col(@scale, @i: 1) when(@i =< @scale) {

  @media (min-width: 960px) {
    .d-col-@{i} {
      .col-width(@i);
      float: left;
      min-height: 1px;
      box-sizing: border-box;
    }

    .d-offset-@{i} {
      .col-margin(@i);
    }
  }


  .generate-d-col(@scale, (@i + 1));
}

.generate-col(@scale, @i: 1) when(@i =< @scale) {
  .col-@{i} {
    .col-width(@i);
    float: left;
    min-height: 1px;
    box-sizing: border-box;
  }

  .offset-@{i} {
    .col-margin(@i);
  }

  .generate-col(@scale, (@i + 1));
}

.generate-col(24);

.generate-d-col(24);

[class^=col-] {
  min-height: 50px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .d-hidden {
    display: none!important;
  }
}

@media (max-width: 1200px) {
  .container {
    padding: 5px!important;
  }
}

@media (max-width: 768px) {
  .m-hidden {
    display: none!important;
  }
}